<template>
    <div class="train-view">
        <n-space align="center" style="height: 60px;padding-left: 20px">
            <AddTrain ref="addTrainRef" :set-key="setAddTrainKey" :key="addTrainKey"/>
            <n-switch
                :rail-style="railStyle"
                checked-value="enable"
                unchecked-value="disable"
                v-model:value="isEnable"
            >
                <template #checked>
                    查看实训
                </template>
                <template #unchecked>
                    查看隐藏
                </template>
            </n-switch>
            <n-input
                placeholder="筛选实训"
                v-model:value="textScreening"
            />
        </n-space>

        <!--数据展示-->
        <n-data-table
            :columns="columns"
            :data="data"
            :bordered="false"
            :max-height="'75vh'"
            :scroll-x="1800"
            :row-key="rowKey"
            children-key="noChildren"
            @update:checked-row-keys="handleCheck"
        />
    </div>
</template>

<script setup>
import {useTeacherStore} from "@/stores/teacher";
import AddTrain from "@/components/teacher/新建模态框/AddTrain.vue";
import workApi from "@/http/workApi";
import {useDialog} from "naive-ui";

// 当前是否启用
let isEnable = ref('enable')
let railStyle = ({focused, checked}) => {
    const style = {};
    if (checked) {
        style.background = "#2080f0";
        if (focused) {
            style.boxShadow = "0 0 0 2px #2080f040";
        }
    } else {

        style.background = "#d03050";
        if (focused) {
            style.boxShadow = "0 0 0 2px #d0305040";
        }
    }
    return style;
}

const dialog = useDialog();
const addTrainKey = ref(0)
const addTrainRef = ref(null)
const setAddTrainKey = () => {
    addTrainKey.value++
}
const useTeacher = useTeacherStore()
useTeacher.updateTrain()
// 选中实训
let checkedRowKeys = ref([])
let rowKey = (row) => row.id
let handleCheck = (rowKeys) => {
    checkedRowKeys.value = rowKeys;
}
// 控制展示几种内容
const columns = [
    // {
    //     type: "selection",
    //     key: null
    // },
    {
        title: "实训名称",
        key: "name"
    },
    {
        title: "实训进度",
        key: "training_schedule"
    },
    {
        title: "实训班级",
        key: "training_class_name"
    },
    {
        title: "创建时间",
        key: "time"
    },

    {
        title: '实训状态',
        key: 'training_status'
    },
    {
        title: '操作',
        align: "center",
        titleAlign: 'center',
        width: 500,
        key: 'actions',
        render(row) {
            // 操作列表
            let array = {
                edit: '查看编辑',
                clone: '克隆实训',
                released: '发布',
                del: '删除',
                deactivated: '隐藏/显示'
            }
            let list = [];
            for (let key in array) {
                list.push(
                    h(
                        'span',
                        {
                            class: 'span-button pointer',
                            onClick: () => operation[key](row)
                        },
                        {default: () => array[key]}
                    )
                )
            }
            return list
        }
    }
];

// 筛选实训
const textScreening = ref("")
const data = computed(() => {
    let array = []
    for (let i of useTeacher.train[isEnable.value]) {
        if (i.name.indexOf(textScreening.value) !== -1) {
            array.push(i)
        }
    }
    return array
})
const edit = (row) => {
    // window.$message.info("@编辑-未完成" + row.name)
    let taskArray = []
    for (let i of row.task) {
        taskArray.push(i.task_id)
    }
    row.taskArray = taskArray
    addTrainRef.value.modify(row, "编辑实训", 'put')
}
const clone = (row) => {
    // window.$message.info("@克隆-未完成" + row.name)
    let taskArray = []
    for (let i of row.task) {
        taskArray.push(i.task_id)
    }
    row.taskArray = taskArray
    row.training_schedule = "未开始"
    row.training_status = "未发布"
    delete row.id
    console.log(row)
    addTrainRef.value.modify(row, "克隆实训", 'post')
}
const result = (row) => {
    window.$message.info("@完成情况-未完成" + row.name)
}
const del = (row) => {
    dialog.warning({
        title: '警告',
        content: '你确定删除吗？',
        positiveText: '确定',
        negativeText: '不确定',
        onPositiveClick: () => {
            workApi.delete('teacher/training', {
                data: {
                    ids: [row.id]
                }
            }).then(() => {
                useTeacher.updateTrain()
            })
        },
    })
}
const deactivated = (row) => {
    dialog.warning({
        title: '警告',
        content: '你确定隐藏/显示吗？',
        positiveText: '确定',
        negativeText: '不确定',
        onPositiveClick: () => {
            workApi.post('teacher/training_disable', {
                ids: [row.id],
                disable: isEnable.value === 'disable'
            }).then(() => {
                useTeacher.updateTrain()
            })
        },
    })
}

const released = (row) => {
    if (row.training_status === "已发布") {
        window.$message.info("该实训状态为已发布")
        return
    }
    workApi.put("teacher/training_publish", {
        id: row.id
    }).then(() => {
        useTeacher.updateTrain()
    })
}

// 操作集合
const operation = {
    edit,
    clone,
    result,
    del,
    deactivated,
    released
}
</script>

<style scoped lang="less">

</style>